<template>
	<view>
		<uni-nav-bar left-icon="back" left-text="返回" :border="false" title="高龄津贴申请"
		 status-bar fixed @clickLeft="backLastPage"
		></uni-nav-bar> 
		<view class="p-2">
			<!-- 上传图片 -->
			<view class="upload-container" @tap="chooseIdentity">
				<view class="flex align-center justify-center" style="width: 100%;">
					<image v-if="identitySrc" :src="identitySrc" class="upload-container-image"></image>
					<view v-else style="color: #95A3AB; line-height: 350rpx;">请拍摄身份证正面</view>
				</view>
			</view>
			<!-- 文本框 -->
			<my-input placeholder="请填写姓名" @input="inputName" icon="icon-yonghu"></my-input>
			<view class="mt-3"></view>
			<my-input placeholder="请填写身份证号码" @input="inputIdcard" type="number" icon="icon-yonghu"></my-input>
			<view class="mt-3"></view>
			<my-input placeholder="请填写电话号码" @input="inputPhone" type="number" icon="icon-yonghu"></my-input>
			<view class="mt-3"></view>
			<my-input placeholder="请填写居住地" @input="inputSensus" icon="icon-yonghu"></my-input>
			<view class="mt-3"></view>
			<view class="flex justify-center align-center mt-3">
				<radio-group name="sbSex" @change="radioSelected">
					<label class="mr-2 font-lg"><radio value="男" />男</label>
					<label class="font-lg"><radio value="女"/>女</label>
				</radio-group> 
			</view>
			<view class="mt-4" style="padding: 0 100rpx;">
				<button type="primary" @tap="formSubmit">提交申请</button>
			</view>
		</view> 
		
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue';
	import myInput from "@/components/ui/myInput.vue"
	
	export default {
		components: {
			uniNavBar,
			myInput
		},
		data() {
			return {
				oddAgeAllowanceData: {
					processKey: "glbt",
					processName: "补贴申请",
					sbName :"",
					sbIdcard: "",
					sbPhone: "",
					sbSensus: "",
					sbSex: "",
					"sbPic":[]
				},
				identitySrc: '',
			}
		},
		methods: {
			async formSubmit () {
				if (this.checkParam(this.oddAgeAllowanceData)) {
					const res = await this.$api.AppUserApply(this.oddAgeAllowanceData);
					if (res.data.code === 200) {
						uni.showToast({
							title: '申请成功',
							icon: 'success',
							duration: 2000
						});
					} else if (res.data.code === 208) {
						uni.showToast({
							title: '您已申请过，不能重复申请',
							icon: 'none',
							duration: 2000
						});
					}
				}
			},
			// 检测参数
			checkParam (obj) {
				// 遍历对象检测都不能为空
				for (let key in obj) {
					if (obj[key] === "") {
						uni.showToast({
						    title: '所以字段都要填写',
							icon: "none",
							duration: 2000
						});
						return false;
					}
				}
				// 检测手机号码时候有误
				if(!(/^1[3456789]\d{9}$/.test(obj.sbPhone))){ 
					uni.showToast({
						title: '手机号码有误',
						icon: "none",
						duration: 2000
					}); 
					return false; 
				}
				if (obj.sbPic.length === 0) {
					uni.showToast({
						title: '请上传证件照',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				return true;
			},
			inputName(e) {
				this.oddAgeAllowanceData.sbName = e;
			},
			inputIdcard(e) {
				this.oddAgeAllowanceData.sbIdcard = e;
			},
			inputPhone(e) {
				this.oddAgeAllowanceData.sbPhone = e;
			},
			inputSensus(e) {
				this.oddAgeAllowanceData.sbSensus = e;
			},
			radioSelected (e) {
				this.oddAgeAllowanceData.sbSex = e.detail.value;
			},
			// 返回上一页
			backLastPage () {
				uni.navigateBack({
				    delta: 1
				});
			},
			chooseIdentity () {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'],
					success: async (res) => {
						this.identitySrc = res.tempFilePaths[0];
						const upload = await this.$api.UploadApplicationPic('file', res.tempFilePaths[0]);
						this.oddAgeAllowanceData.sbPic.push(JSON.parse(upload.data).result);
					},
					fail: (res) => {
						console.log(res)
					}
				});
			}
		}
	}
</script>

<style>
.upload-container { display: flex; width: 80%; height: 350rpx; margin: 40rpx auto; border-radius: 25rpx; border: solid 1px #CCCCCC; }
.upload-container-image { width: 100%; height: 100%; border-radius: 25rpx; }
</style>
